<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签演示使用</title>
    <style>
        table {
            border: 3px solid red;
            /* 边框宽度  边框样式  边框颜色 */
        }

        /* tr {
            text-align: center;
        } */
        /* 表格里面的文字默认都是格子居中显示的*/
    </style>
</head>

<body>

    <!-- border表格外边框宽度(至少为1)  cellspacing 每个单元格间距  -->
    <table border="1px" width="600px" cellspacing="0">
        <!-- caption 表格标题 默认表格最上面居中显示 -->
        <caption>品牌信息</caption>
        <tr> <!-- 表格的行 每一个tr标签就是表格的一行 -->
            <!-- th默认居中，td默认左对齐 -->
            <th>序号</th> <!-- 表格的表头即每一列最上面的声明这列是什么的 默认加粗-->
            <th>Log</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1</td> <!-- 单元格指令  表格的单元格 -->
            <td><img width="100px"
                    src="https://www.huawei.com/-/media/hcomponent-header/1.0.1.20250724165002/component/img/huawei_logo.png">
            </td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2</td>
            <td><img width="100px"
                    src="https://img2.baidu.com/it/u=647589501,1414015406&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
            </td>
            <td>小米</td>
            <td>小米科技有限公司</td>
        </tr>
        <tr>
            <!-- colspan 合并列数  -->
            <td class="merged-cell" colspan="4">这是合并了4列的单元格(colspan="4")</td>
        </tr>
        <tr>
            <!-- rowspan 合并行数 -->
            <td class="rowspan-example" rowspan="2">行合并示例 (rowspan="2")</td>
            <td>合并单元格内容</td>
            <td>占据两行高度</td>
            <td>第4行，第4列</td>
        </tr>
        <tr>
            <!-- 这里留空是因为上面的单元格已通过rowspan占据了这个位置 -->
            <td>第5行，第2列</td>
            <td>第5行，第3列</td>
            <td>第5行，第4列</td>
        </tr>
        <tr>
            <td>5</td>
            <td>修复后的行</td>
            <td>包含所有单元格</td>
            <td>结构完整</td>
        </tr>



    </table>

</body>

</html>